<template>
  <u-waterfall v-model="dataList" ref="uWaterfall">
    <template v-slot:left="{ leftList }">
      <view
        class="list-item"
        v-for="(item, index) in leftList"
        :key="index"
        @click="gotoDetail(item)"
      >
        <image class="good-banner" :src="item.pic_url" mode="widthFix" />
        <view class="goods-info">
          <view class="goods-name">{{ item.name }}</view>
          <view class="goods-price">
            <view class="price">
              <text>￥</text>
              <text>{{ item.price | priceBeforeZero }}</text>
              <text>{{ item.price | priceAfterZero }}</text>
            </view>
          </view>
          <view class="good-evaluate">
            <text>{{ item.comment }}{{ $t("search.evaluation") }}</text>
            <text>{{ item.rank_good_percent }}{{ $t("goods.good") }}</text>
          </view>
          <view class="good-sale"
            >{{ $t("goods.count") }}：{{ item.sales }}</view
          >
        </view>
      </view>
    </template>
    <template v-slot:right="{ rightList }">
      <view
        class="list-item"
        v-for="(item, index) in rightList"
        :key="index"
        @click="gotoDetail"
      >
        <image class="good-banner" :src="item.pic_url" mode="widthFix" />
        <view class="goods-info">
          <view class="goods-name">{{ item.name }}</view>
          <view class="goods-price">
            <view class="price">
              <text>￥</text>
              <text>{{ item.price | priceBeforeZero }}</text>
              <text>{{ item.price | priceAfterZero }}</text>
            </view>
          </view>
          <view class="good-evaluate">
            <text>{{ item.comment }}{{ $t("search.evaluation") }}</text>
            <text>{{ item.rank_good_percent }}{{ $t("goods.good") }}</text>
          </view>
          <view class="good-sale"
            >{{ $t("goods.count") }}：{{ item.sales }}</view
          >
        </view>
      </view>
    </template>
  </u-waterfall>
</template>

<script>
export default {
  props: {
    dataList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {};
  },
  created() {},
  filters: {
    priceBeforeZero(val) {
      if (val.indexOf(".") < 0) return `${val}.`;
      return val.substr(0, val.indexOf("."));
    },
    priceAfterZero(val) {
      if (val.indexOf(".") < 0) return "00";
      return val.substr(val.indexOf("."), val.lenhth);
    },
  },
  computed: {},
  methods: {
    gotoDetail(item) {
      this.$utils.toUrl("/goods/goods/goods?id=" + item.id);
    },
  },
};
</script>

<style scoped lang="scss">
.list-item {
  width: 354rpx;
  // height: 633rpx;
  margin: 0 10rpx 10rpx 0;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #ffffff;
  border-radius: 16rpx;
  float: left;
  padding-bottom: 12rpx;

  .good-banner {
    width: 354rpx;
    // height: 354rpx;
    background: #ececec;
    border-radius: 16rpx 16rpx 0 0;
    display: block;
  }

  .goods-info {
    margin: 14rpx auto 0;
    width: 89.83%;

    .goods-name {
      max-width: 322rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #262626;
      line-height: 40rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .goods-price {
      max-width: 322rpx;
      line-height: 40rpx;
      margin-top: 20rpx;

      .price {
        max-width: 322rpx;
        display: flex;
        align-items: baseline;
        color: #fa2c19;
        font-weight: 500;

        text:nth-child(1) {
          font-size: 24rpx;
        }
        text:nth-child(2) {
          font-size: 36rpx;
        }
        text:nth-child(3) {
          font-size: 24rpx;
        }
      }
    }

    .good-evaluate {
      max-width: 322rpx;
      margin-top: 10rpx;
      font-size: 22rpx;
      font-weight: 400;
      color: #888888;
      line-height: 40rpx;

      text:last-child {
        margin-left: 13rpx;
      }
    }
    .good-sale {
      max-width: 322rpx;
      margin-top: 8rpx;
      font-size: 22rpx;
      font-weight: 400;
      color: #888888;
      line-height: 40rpx;
    }
  }

  .add-car {
    width: 52rpx;
    height: 52rpx;
    background: #f2f2f2;
    border-radius: 26rpx;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 11;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 24rpx;
      height: 24rpx;
      display: block;
    }
  }
}
</style>
